<template>
	<div class="wrap">
		<h2 class="title">更换的房间申请</h2>
		<el-row>
			<el-col :span="3">
				<el-form-item label="楼栋">
					<el-select v-model="searchBuild">
						<el-option v-for="i in buildNumber" :key="i" :label="`${i}栋`" :value="i" />
					</el-select>
				</el-form-item>
			</el-col>
			<!-- <el-col :offset="1" :span="2">
				
			</el-col> -->
		</el-row>
		<h2 class="title2">可更换的房间</h2>

		<!-- 可选择的跟换的房间 -->
		<el-space :size="20" :wrap="true">
			<template v-for="room in roomInfo" :key="room">
				<DomitoryCard
					:build="room.buildId"
					:room-id="room.dorNumber"
					:status="room.capacity - room.already ? '未住满' : '已住满'">
					<template #control="{ data }">
						<el-button @click="handleclick(data.row, room)" v-if="!data.row.stuId" type="warning" link
							>申请换房</el-button
						>
						<!-- <el-button @click="handleclick(row)" v-else type="warning" link>申请换房</el-button> -->
					</template>
				</DomitoryCard>
			</template>
		</el-space>
		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total,sizes,prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 换房申请对话框 -->
		<el-dialog v-model="showDialog" width="500">
			<el-form :model="form" label-width="auto" style="max-width: 500px">
				<el-form-item label="学号">
					<el-input disabled :value="form.stuId" readonly />
				</el-form-item>
				<el-form-item label="目标寝室">
					<el-row justify="space-between" style="width: 100%">
						<el-col :span="7">
							<el-form-item label="楼栋：">
								<el-input v-model.number="form.buildId" readonly />
							</el-form-item>
						</el-col>

						<el-col :span="7">
							<el-form-item label="寝室号：">
								<el-input v-model.number="form.newRoom" readonly />
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="床位：">
								<el-input v-model.number="form.newBed" readonly />
							</el-form-item>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item label="申请理由">
					<el-input
						v-model.trim="form.reason"
						type="textarea"
						resize="none"
						:autosize="{ minRows: 2, maxRows: 6 }"
						maxlength="300" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="onSubmit">提交申请</el-button>
				<el-button @click="showDialog = false">取消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { reactive, computed, ref, onMounted, watch } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { getBuildOne } from '@/utils/axios/master'
import { getBuildInfoOneBuild } from '@/utils/axios/getTotal'
import { submitApplyInfo } from '@/utils/axios/stuReqest'
import DomitoryCard from '@/components/mod/DomitoryCard.vue'

const userStore = useUserStore()

const router = useRouter()
const showDialog = ref(false)
const sex = userStore.userInfo.sex

//分页数据
const pageSize = ref(24)
const currentPage = ref(1)
const pageSizes = ref([24, 40, 80, 100, 200])
const total = ref(0)

// 可选楼栋房间信息
const roomInfo = ref([])

// 计算可选楼栋
const buildNumber = computed(() => {
	let list = []
	for (let i = 0; i < 20; i++) list.push(i + 1)
	if (sex == 2) return list.filter((i) => i % 2 == 0)
	else if (sex == 1) return list.filter((i) => i % 2 == 1)
})
// 查询的楼栋
const searchBuild = ref(16)

// 房间申请数据
const form = reactive({
	stuId: userStore.userInfo.stuId,
	newRoom: '', //房间号
	buildId: '', //楼栋
	reason: '',
	newBed: '', //新床位
})

// 监听搜索楼栋变化
watch(searchBuild, async (newVal) => {
	currentPage.value = 1
	await init(newVal, currentPage.value, pageSize.value)
})

// 处理显示对话框点击事件
const handleclick = (val, build) => {
	form.buildId = build.buildId
	form.newRoom = build.dorNumber
	form.newBed = val.bed
	showDialog.value = true
}

// 处理分页
const handleSizeChange = async (val) => {
	let { data } = await getBuildOne({
		buildId: parseInt(searchBuild.value),
		currentPage: currentPage.value,
		pageSize: val,
	})
	roomInfo.value = data
}
// 处理分页
const handleCurrentChange = async (val) => {
	let { data } = await getBuildOne({ buildId: parseInt(searchBuild.value), currentPage: val, pageSize: pageSize.value })
	roomInfo.value = data
}

// 提交申请
const onSubmit = () =>
	submitApplyInfo(form)
		.then(() => {
			showDialog.value = false
		})
		.catch(() => (showDialog.value = false))

async function init(buildId, currentPage, pageSize) {
	let { data } = await getBuildOne({ buildId: parseInt(buildId), currentPage: currentPage, pageSize: pageSize })
	console.log(data, '---')
	roomInfo.value = data
}

onMounted(async () => {
	if (sex == 3) {
		ElMessage.warning({ message: '请先完善个人信息', duration: 2000 })
		router.push('/home/stu_center')
	}
	await init(parseInt(searchBuild.value), currentPage.value, pageSize.value)
	let res = await getBuildInfoOneBuild({ buildId: parseInt(searchBuild.value) })

	total.value = res.data
})
</script>

<style scoped lang="scss">
.title2 {
	font-size: 14px;
	font-weight: 800;
	color: rgba(5, 93, 201, 0.758);
	margin-bottom: 20px;
	margin: 0 0 20px;
}
.el-row {
	.el-col {
		margin-right: 10px;
	}
}

.title {
	font-size: var(--title-size);
	font-weight: var(--fontweight);
	margin-bottom: 30px;
}
</style>
